<template>
    <div>
        <BookInfo :info='info'></BookInfo>
        <CommentList :comments='comments'></CommentList>
        <div class="comment" v-if="showAdd">
            <div class="mini-title">图书短评</div>
            <textarea class="textarea"
                        placeholder="请输入图书短评"
                        v-model="comment"
                        :maxlength="100"
                        placeholder-style="font-size:12px;"></textarea>
            <div class="location">
                地理位置：
                 <switch color="#ea5149" :check="location" @change="getGeo"/>
                 <span>{{location}}</span>
            </div>
            <div class="phone">
                手机型号：
                 <switch color="#ea5149" font-size="12px"  :check="phone" @change="getPhone"/>
                 <span>{{phone}}</span>
            </div>
            <button class="addComments" @click="addComment">提交评论</button>
        </div>
        <div class="text-info" v-else>未登录或已评论</div>
        <button class="btn-share" open-type='share'>转发给好友</button>
    </div>
</template>

<script>
import {get, post, showSuccess, showModal} from '@/util'
import BookInfo from '@/components/BookInfo'
import CommentList from '@/components/CommentList'
export default {
    components:{
        BookInfo,
        CommentList
    },
    data(){
        return{
            bookid:'',
            info:'',
            comment:'',
            phone:'',
            location:'',
            userinfo:{},
            time:'',
            comments:[]
        }
    },
    computed:{
        // 获取当前时间
        getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + date.getSeconds();
            this.time = currentdate;
        },
        //是否显示评论框的校验
        showAdd(){
            //没登录不显示评论
            if(!this.userinfo.openId){
                return false
            }
            //登录了但查询到了自己的评论
            if(this.comments.filter(v => v.openid === this.userinfo.openId).length){
                return false
            }
            return true
        }
    },
    methods:{
        async getDetail(){
            const info = await get('/weapp/bookDetail',{id:this.bookid})
            console.log('点击了',info.title)
            this.info = info
            wx.setNavigationBarTitle({
                title: info.title
            })
        },
        async getComments(){ //通过图书id获取评论列表
            const comments = await get('/weapp/commentList',{bookid: this.bookid})
            this.comments = comments.list
            console.log('comments',comments)
        },
        async addComment(){
            if (!this.comment) {
                showModal('提示信息','请先输入您的短评')
                return
            }
            const data = {
                openid: this.userinfo.openId,
                bookid:this.bookid,
                comment:this.comment,
                phone:this.phone,
                location:this.location,
                time:this.time
            }
            console.log('提交的评论内容',data)
            try {
                await post('/weapp/addcomment',data)
                showSuccess('评论成功')
                this.comment = '' 
                this.getComments()       
            }catch(e){
                showModal('失败',msg)
            }
        },
        getGeo(e){
            if(e.target.value){
                const ak = 'Qr40h0VMAAnNvqUgwS9YVO6i1PCvcgGv' //百度地图api
                let url = 'http://api.map.baidu.com/geocoder/v2/'
                wx.getLocation({
                    success: geo=>{
                        wx.request({
                            url,
                            data:{
                                ak,
                                location: `${geo.latitude},${geo.longitude}`,
                                output:'json'
                            },
                            success:res=>{
                                console.log('res',res)
                                if(res.data.status===0){
                                    let address = res.data.result.formatted_address
                                    let address1= address.replace('新疆维吾尔自治区乌鲁木齐市','新疆乌市')
                                    this.location = address1
                                }
                            }
                        })
                        console.log('geo',geo)
                    }
                    
                })
            }else{
                this.location = ''
            }
        },
        getPhone(e){
            if(e.target.value){
                const res = wx.getSystemInfoSync()
                console.log(res.model)
                this.phone = res.model
            }else{
                //没有数据
                this.phone = ''
            }
            
        }

    },
    mounted() {
        this.bookid = this.$root.$mp.query.id
        this.getDetail()
        let userinfo = wx.getStorageSync('userInfo')
        console.log('109-userinfo',userinfo)
        if(userinfo){
            this.userinfo = userinfo
        }
        this.getComments()
        wx.showShareMenu({
            withShareTicket: true
        })
    }
   
    
}
</script>

<style lang='scss' scoped>
.text-info{
    margin: 10px 0;
    color: #666;
    font-size: 14px;
    text-align: center;
}
.comment{
    width: 750rpx;
    .addComments{
        width: 50%;
        margin: 0 auto;
        padding: 2px 5px;
        background: #ea5149;
        color: #fff;
        font-size: 14px;
        height: 35px;
        line-height: 35px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    .textarea{
        background: #f3f2f2;
        margin-top: 10rpx;
        padding: 10rpx;
        width: 100%;
        margin-bottom: 10px;
        font-size: 12px;
        color: #666;
        height: 150rpx;
    }
    .location,.phone{
        font-size: 12px;
        color: #444;
        padding-left: 5px;
        span{
            font-size: 12px;
        }
        switch{
             transform:scale(0.8) !important;
        }
    }

    
}
</style>
